<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <meta charset="UTF-8">
    <title>database-export</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../../../static/assetss/images/fav.png" th:href="@{/assetss/images/fav.png}">
    <link rel="stylesheet" href="../../../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../../static/bootstrap/select/bootstrap-select.min.css" th:href="@{/bootstrap/select/bootstrap-select.min.css}">
    <link rel="stylesheet" href="../../../static/css/index.css" th:href="@{/css/index.css}">
    <script src="../../../static/js/jquery-3.3.1.js" th:src="@{/js/jquery-3.3.1.js}"></script>
    <script src="../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script src="../../../static/bootstrap/select/bootstrap-select.min.js" th:src="@{/bootstrap/select/bootstrap-select.min.js}"></script>
</head>
<style>
    .body{
        margin-left: 200px;
        margin-right: 200px;
    }
    .table{
        margin-bottom: 0px !important;

    }
    .sp {
        width: 32px;
        height: 32px;
        clear: both;
        margin: 20px auto;
    }

    /* Spinner Circle Rotation */
    .sp-circle {
        border: 4px rgba(0, 0, 0, 0.25) solid;
        border-top: 4px black solid;
        border-radius: 50%;
        -webkit-animation: spCircRot .6s infinite linear;
        animation: spCircRot .6s infinite linear;
    }

    @-webkit-keyframes spCircRot {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(359deg);
        }
    }
    @keyframes spCircRot {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }
    .top-nav{
        height: 8%;
        width: 100%;
        box-shadow: none;
        position: fixed;
        top: 0;
        background-color: white;
    }
    #backToTopBtn{
        width: 40px;
        background-repeat: no-repeat;
        background-position:center;
        position: fixed;
        bottom: 5%;
        right:2%;
        cursor: pointer;
        display: none;
    }
</style>
<body>
<div class="top-nav">
    <div style="text-align: left;margin-left: 10%;">
        <img style="width: 80px" th:src="@{/assetss/images/fav.png}"><span style="font-size: 30px;margin-left: 10px;">database-export 数据库表html预览</span>
        <div style="display: inline-block;"><!--position: fixed;right:20%;top:2%;-->
            <select id="db-contents" onchange="selectOnChang(this)" data-size="10" class="selectpicker" data-live-search="true" data-live-search-placeholder="搜索" data-actions-box="true">
            </select>
        </div>

    </div>
</div>
<div id="app" style="overflow-x: hidden">
    <div class="body" id="body" style="margin-top: 40px;">
        <div class="row">
            <div class="sp sp-circle"></div>
            <h5 style="text-align: center">正在加载中...</h5>
        </div>
    </div>
</div>
<img id="backToTopBtn" title="回到顶部" onclick="topFunction()" th:src="@{/assetss/images/back-to-top.png}"></span>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var ctx = [[@{/}]];
    var base64Params = [[${base64Params}]];
    let decodeParams = JSON.parse(atob(base64Params));
    $("#db-contents").attr("title",decodeParams.dbName);
</script>
<script type="text/javascript">
    $(function () {
        loadInfo();
        $("#db-contents").selectpicker({
            width: '300px',
        });
        window.onscroll = function () {
            scrollFunction();
        };
    });

    function scrollFunction() {
        if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
            document.getElementById("backToTopBtn").style.display = "block";
            $(".top-nav").css("box-shadow",'0px 2px 5px #888888');
        } else {
            document.getElementById("backToTopBtn").style.display = "none";
            $(".top-nav").css("box-shadow",'none');
        }
    }

    function selectOnChang(obj) {
        window.location.href = "#" + obj.value;
    }

    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        $("#db-contents").selectpicker('refresh');
    }

    function loadInfo() {
        $.ajax({
            url: ctx + "v2/getTableData",
            data: {
                base64Params:base64Params
            },
            success: function (data) {
                let resultCode = data.resultCode;
                if (resultCode == '000000') {
                    loadTable(data.params);
                } else {
                    alert(data.resultMsg);
                }
            }
        });
    }

    function loadTable(params) {
        let headerList = params.headerList;
        let fieldList = params.fieldList;
        let tableDetailInfo = params.tableDetailInfo;
        let tableHtml = '';
        let headerHtml = '';
        for (let i = 0; i < headerList.length; i++) {
            headerHtml += '<th>' + headerList[i] + '</th>'
        }
        let dbContentsHmtl = new Array();
        for (let i = 0; i < tableDetailInfo.length; i++) {
            let table = tableDetailInfo[i];
            let tabsColumn = table.tabsColumn;
            let tbodyHtml = "";
            for (let j = 0; j < tabsColumn.length; j++) {
                tbodyHtml += '<tr>';
                for (let k = 0; k < fieldList.length; k++) {
                    let column = tabsColumn[j];
                    let columnElement = column[fieldList[k]];
                    if (columnElement == undefined || columnElement == '') {
                        columnElement = "无";
                    }
                    tbodyHtml += '<td>' + columnElement + '</td>';
                }
                tbodyHtml += '</tr>';
            }
            let tableLable = table.tableName + '(' + table.tableComments + ')';
            tableHtml +=
                '<div id="' + tableLable + '" style="padding-top: 60px;">'+
                '<table class="table table-bordered table-hover">' +
                '<caption style="font-weight: bolder;font-size: 30px">' + tableLable + '</caption>' +
                '<thead>' +
                '<tr>' + headerHtml + '</tr>' +
                '</thead>' +
                '<tbody>' + tbodyHtml + '</tbody>' +
                '</table>'+
                '</div>';
            dbContentsHmtl.push('<option value="' + tableLable + '">' + tableLable + '</option>');
            $("#db-contents").empty();
            $("#db-contents").append(dbContentsHmtl.join(''));
            $("#db-contents").selectpicker('refresh');
        }
        $("#body").empty();
        $("#body").append(tableHtml);
    }
</script>
</body>

</html>